<template>
  <div class="about">
    <h2>About组件 {{ $route.query }}</h2>
    <h2>About组件 {{ $route.query.name }} - {{ $route.query.age }}</h2>
    <button @click="backBtnClick">返回</button>
    <button @click="forwardBtnClick">向前</button>
    <button @click="backdBtnClick2">返回两步</button>
  </div>
</template>

<script setup>
  import { useRouter } from "vue-router";
  const router = useRouter()
  function backBtnClick() {
    router.back() // 相当于go(-1)
  }
  function forwardBtnClick() {
    router.forward() // 相当于go(1)
  }
  function backdBtnClick2() {
    router.go(-2) // 返回两步,正数表示前进,负数表示后退,如果没有那么多记录,比如go(-1000),静默失败
  }
</script>

<style scoped>

</style>